<template>
  <div class="form-box">
    <div v-if="activityName" style="text-align: center;" class="head-top-box">{{activityName}}</div>
    <div v-if="ticketTypeName" class="head-top-tit-box">{{ticketTypeName}}</div>
    <!-- 表单组件 -->
    <formCom :formListIndex="0"></formCom>
    <!-- 添加参加人 -->
    <div v-if="$store.state.formFiled.componenList.length" class="template-container">
      <!-- <div @click="openPage('table')" class="big-box">
        <div class="title">
        </div>
        <div class="con">
          <input style="padding-left:38%;font-size:1.1rem;color: #A0A0A0;" readonly="readonly" placeholder="添加参加人 +" type="text">
        </div>
      </div> -->
    </div>
    <!-- 服务协议 -->
    <div v-if="$store.state.formFiled.componenList.length" style="margin-bottom:5.8rem;margin-top:4.8rem;; cursor: pointer;" class="Agre-box">
      <img @click="check=true" v-if="!check" style="width: 1.6rem;" src="https://gw.alicdn.com/tfs/TB1_m_8IwTqK1RjSZPhXXXfOFXa-64-64.png">
      <img @click="check=false" v-if="check" style="width: 1.6rem;" src="https://gw.alicdn.com/tfs/TB1Ex3CIxnaK1RjSZFtXXbC2VXa-64-64.png">
      <div @click="check=!check" style="margin:0rem 0.36rem;color:#797979;" class="Agre-tit">
        我已阅读并同意
      </div>
      <div style="color:#FF3E85" class="Agre-tit">
        <p style="text-align:left;padding:.1rem 0" @click="openPage(item.agreementId)" v-for="(item, index) in $store.state.agreeList" :key="index">《{{item.title}}》</p>
      </div>
    </div>
    <!-- 验证手机号码 -->
    <div @touchmove.prevent>
      <phoneCode></phoneCode>
    </div>
    <!-- 提交报名 -->
    <!-- <div v-if="goodsSubmit && $store.state.formFiled.componenList.length" class="submit-form-box"> -->
    <div v-if="$store.state.formFiled.componenList.length" class="submit-form-box">
      <div @click="subForm()" class="submit-form">
        提交报名
      </div>
    </div>
  </div>
</template>
<script>
import { formListCheck } from "./js/vuexFormList.js";

import formCom from "./formCom"; //表单组件

import phoneCode from "./phoneCode";
export default {
  components: {
    formCom,
    phoneCode
  },
  data() {
    return {
      ticketTypeName: "", //票名称
      activityName: "", // 名称
      goodsSubmit: true, //控制输入框
      check: false, //服务协议
      locationSearch: "" //URL
    };
  },
  created() {
    this.locationSearch = location.href;

    this.$store.state.urlParam.activityId = !this.GetUrlParam("activeId")
      ? null
      : this.initUrl("activeId");
    this.$store.state.urlParam.ticketTypeId = !this.GetUrlParam("ticketTypeId")
      ? null
      : this.initUrl("ticketTypeId");
    this.$store.state.urlParam.corpId = !this.GetUrlParam("corpId")
      ? null
      : this.initUrl("corpId");
    this.$store.state.urlParam.channelId = !this.GetUrlParam("channelId")
      ? null
      : this.initUrl("channelId");

    let dataUrl = {
      activityId: !this.GetUrlParam("activeId")
        ? null
        : this.initUrl("activeId"),
      ticketTypeId: !this.GetUrlParam("ticketTypeId")
        ? null
        : this.initUrl("ticketTypeId"),
      corpId: !this.GetUrlParam("corpId") ? null : this.initUrl("corpId"),
      channelId: !this.GetUrlParam("channelId")
        ? null
        : this.initUrl("channelId")
    };
    sessionStorage.setItem("urlParam", JSON.stringify(dataUrl));

    //input 控制输入框时被顶上去;
    let t = this;
    t.documentH = document.body.scrollHeight;
    window.onresize = function() {
      if (document.body.scrollHeight < t.documentH) {
        t.goodsSubmit = false;
      } else {
        t.goodsSubmit = true;
      }
    };

    this.getForumList();
  },
  activated() {},
  methods: {
    initUrl(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            this.locationSearch
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) ||
        JSON.parse(sessionStorage.getItem("urlParam"))[name] ||
        ""
      );
    },
    GetUrlParam(paraName) {
      var url = this.locationSearch;
      var arrObj = url.split("?");

      if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == paraName) {
            return arr[0];
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 得到论坛数据
    getForumList() {
      let dataUrlParam = JSON.parse(sessionStorage.getItem("urlParam"));
      this.$Indicator.open({
        text: "获取最新数据中",
        spinnerType: "fading-circle"
      });
      this.$http
        .post("/api/isv/signUp/queryForum", {
          activityId:
            this.$store.state.urlParam.activityId || dataUrlParam.activityId,
          corpId: this.$store.state.urlParam.corpId || dataUrlParam.corpId
        })
        .then(
          res => {
            this.$Indicator.close();
            if (res.data.success) {
              this.$store.state.forumList = res.data.result;
              this.getFormFiled();
            } else {
              // this.$Toast({
              //   message: res.data.errorMsg || "最新论坛数据获取失败",
              //   position: "middle",
              //   duration: 3000
              // });
            }
          },
          err => {
            this.$Indicator.close();
            // this.$Toast({
            //   message: "最新数据获取失败",
            //   position: "middle",
            //   duration: 3000
            // });
          }
        );
    },
    // 得到表单字段
    getFormFiled() {
      this.$Indicator.open({
        text: "获取数据中",
        spinnerType: "fading-circle"
      });
      let subData = {
        activityId: this.$store.state.urlParam.activityId,
        ticketTypeId: this.$store.state.urlParam.ticketTypeId,
        isPay: "free"
      };
      this.$http.post("/api/isv/temp/queryTempletByTicketTypeId", subData).then(
        res => {
          this.$Indicator.close();
          if (res.data.success) {
            // 确定表单字段
            this.$store.state.formFiled.componenList = [];
            this.$store.state.activityName = res.data.result.activityName;
            this.$store.state.agreeList = res.data.result.agreeList;
            this.$store.state.formFiled.componenList = JSON.parse(
              res.data.result.vnote1
            );

            this.activityName = res.data.result.activityName;
            if (this.activityName) {
              document.title = this.activityName;
            }
            this.ticketTypeName = `${res.data.result.ticketTypeName}`;
            this.$forceUpdate();

            sessionStorage.setItem("componenList", res.data.result.vnote1);
            this.$store.state.urlParam.tempId = res.data.result.id;

            // 添加论坛选择组件
            let forum = {
              componentName: "selForumTem",
              attribute: {
                filedValue: "",
                filedValuebbsname: "", //新增加为了显示名称
                filedCode: "bbsId",
                titName: "分论坛意向",
                placeholder: "请选择",
                ifCheck: true,
                selectList: []
              }
            };
            if (this.$store.state.forumList.length != 0) {
              this.$store.state.formFiled.componenList.push(forum); // 添加论坛选择组件  先注释一下（phoneCode 里面的bbsId 提交数据已经注释掉）
            }
            // 默认添加一个参会人
            let obj = JSON.parse(JSON.stringify(this.$store.state.formFiled));
            obj.templateId = Number(new Date());
            this.$store.state.formList = [];
            this.$store.state.formList.push(obj); //添加表格数据
            this.$store.state.thisEditTemplateId = this.$store.state.formList[0].templateId; //当前正在填写的字段模板
          } else {
            let errMsg = res.data.errorMsg;
            if (errMsg.length > 100) {
              errMsg = "";
            }
            this.$Toast({
              message: res.data.errorMsg || "表单字段数据获取失败",
              position: "middle",
              duration: 3000
            });
          }
        },
        err => {
          this.$Indicator.close();
          this.$Toast({
            message: res.data.errorMsg || "数据获取失败",
            position: "middle",
            duration: 3000
          });
        }
      );
    },
    // 打开新的页面
    openPage(item) {
      let data = "";
      for (let i = 0; i < this.$store.state.agreeList.length; i++) {
        let element = this.$store.state.agreeList[i];
        if (item == element.agreementId) {
          data = element.xyvote;
        }
      }
      this.$router.push({
        name: "check",
        params: {
          data: data
        }
      });
    },
    async subForm() {
      //填写表单的集合数据及认证是否必填项为空
      let subData = await formListCheck(this.$store.state.formList);
      if (subData) {
        if (!this.check) {
          this.$Toast({
            message: "请同意服务协议",
            position: "middle",
            duration: 3000
          });
          return;
        }
        this.$store.state.isShowPhoneAlert = true;
      }
    }
  }
};
</script>
<style scoped>
@import "./../../static/css/select.css";
.form-box {
  width: 100%;
  height: 100%;
  background: #f4f5f4;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.head-top-tit-box {
  width: 100%;
  height: auto;
  text-align: left;
  color: #1f222f;
  padding: 0.8rem 1.2rem;
  background: #fff;
  font-size: 1.1rem;
  font-weight: bold;
}
.template-container {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 0rem 1.2rem;
}
.form-box > div:first-of-type > div {
  border: none;
}
.submit-form-box {
  position: fixed;
  bottom: 0rem;
  left: 0rem;
  width: 100%;
  height: 5rem;
  z-index: 99;
  background: #ffffff;
  border-top: 0.1rem solid #dedede;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.submit-form {
  background: #ff3e85;
  font-size: 1.4rem;
  color: #ffffff;
  width: 69%;
  height: 3.5rem;
  line-height: 3.5rem;
  cursor: pointer;
}
.submit-form:active {
  background: rgba(249, 29, 112, 0.6);
}

.Agre-box {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.Agre-tit {
  font-size: 0.9rem;
  color: #fff;
}
.head-top-box {
  width: 100%;
  height: auto;
  text-align: left;
  color: #ffffff;
  font-size: 1.2rem;
  padding: 1rem;
  background: #1f222f;
}
</style>

